<template>
  <div>
    <div v-if="isSuccess">
      <a-spin :spinning="spinning.total">
        <j-form-container>
          <a-form-model ref="ruleForm" :model="form" :rules="rules" slot="detail">
            <a-card :bordered="false">
              <a-row>
                <a-col :span="24">
                  <div class="tip-title-now">基础设置
                    <a-button type="primary" style="float: right;margin-right: 10px;" v-if="isNotAdmin"
                              @click="submitBasic">
                      修改基础设置
                    </a-button>
                  </div>
                </a-col>
                <a-spin :spinning="spinning.isNotAdmin">
                  <a-col :span="24">
                    <a-form-model-item label="登录账号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userName">
                      <a-input v-model="form.userName" :disabled="true" placeholder="请输入登录账号"
                               style="width: 50%"></a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24" v-if="!isNotAdmin">
                    <a-form-model-item label="排序值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sequence">
                      <a-input-number :min="0" :max="999999" :precision="0" v-model="form.sequence" placeholder="请输入排序值"
                                      style="width: 50%"/>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-model-item label="提现手续费比例(%)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cashRate">
                      <a-input-number :min="0" :max="100" :precision="0" v-model="form.cashRate"
                                      placeholder="请输入提现手续费比例(%)" style="width: 50%"/>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-model-item label="自动确认收货天数" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                       prop="confirmDays">
                      <a-input-number :min="1" :max="99999" :precision="0" v-model="form.confirmDays"
                                      placeholder="请输入自动确认收货天数" style="width: 50%"/>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-model-item label="运费计算规则" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="expressType">
                      <j-dict-select-tag v-model="form.expressType" dictCode="express_type"
                                         style="width: 50%"/>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-model-item label="待发货是否退运费" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                       prop="refundOnWaitingSend">
                      <j-dict-select-tag v-model="form.refundOnWaitingSend" dictCode="yn"
                                         style="width: 50%"/>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-model-item label="待收货是否退运费" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                       prop="refundOnWaitingConfirm">
                      <j-dict-select-tag v-model="form.refundOnWaitingConfirm" dictCode="yn"
                                         style="width: 50%"/>
                    </a-form-model-item>
                  </a-col>

                  <a-col :span="24">
                    <a-form-model-item label="客服电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customTel">
                      <a-input v-model="form.customTel" placeholder="请输入客服电话"
                               style="width: 50%"></a-input>
                    </a-form-model-item>
                  </a-col>

                </a-spin>

                <a-col :span="24">
                  <div class="tip-title-now">商家信息</div>
                </a-col>
                <a-col :span="24">
                  <a-form-model-item label="商铺名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
                    <a-input v-model="form.name" :disabled="isNotAdmin" placeholder="请输入商铺名称"></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24">
                  <a-form-model-item label="经营类目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="categoryIds">
                    <a-select mode="multiple" v-model="form.categoryIds" style="width: 50%" :disabled="isNotAdmin">
                      <a-select-option v-for="(item,index) in serviceData" :key="index" :value="item.id">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>

                <a-col :span="24">
                  <a-form-model-item label="logo" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="logoUrl">
                    <j-image-upload class="avatar-uploader" :accept="'image/png,image/jpeg'" text="上传"
                                    v-model="form.logoUrl" :disabled="isNotAdmin"></j-image-upload>
                    <span>推荐尺寸：500*500像素；小于3M；支持png/jpeg/jpg</span>
                  </a-form-model-item>
                </a-col>

                <a-col :span="24">
                  <a-form-model-item label="商铺地区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="did">
                    <j-area-linkage v-model="form.did" type="cascader" :disabled="isNotAdmin" style="width: 50%"/>
                  </a-form-model-item>
                </a-col>

                <a-col :span="24">
                  <a-form-model-item label="店铺地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
                    <a-input v-model="form.address" :disabled="isNotAdmin" placeholder="请输入店铺地址"></a-input>
                  </a-form-model-item>
                </a-col>


                <a-col :span="24">
                  <div class="tip-title-now">店铺管理人信息</div>
                </a-col>

                <a-col :span="24">
                  <a-form-model-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="custodianName">
                    <a-input v-model="form.custodianName" :disabled="isNotAdmin" placeholder="请输入管理人姓名"></a-input>
                  </a-form-model-item>
                </a-col>

                <a-col :span="24">
                  <a-form-model-item label="联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="custodianPhone">
                    <a-input v-model="form.custodianPhone" :disabled="isNotAdmin" placeholder="请输入管理人联系方式"></a-input>
                  </a-form-model-item>
                </a-col>

                <a-col :span="24">
                  <div class="tip-title-now">资质信息</div>
                </a-col>

                <a-col :span="24">
                  <a-form-model-item label="营业执照及其他相关资质" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                     prop="businessLicense">
                    <j-image-upload :isMultiple="true" :num="9" class="avatar-uploader" text="上传"
                                    v-model="form.businessLicense" :disabled="isNotAdmin">
                    </j-image-upload>
                    <span>(至多9张；支持png/jpeg/jpg)</span>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-card>
          </a-form-model>
        </j-form-container>
      </a-spin>
      <footer-tool-bar v-if="!isNotAdmin">
        <a-button type="primary" @click="submitInfo">提交修改</a-button>
      </footer-tool-bar>
    </div>
    <div v-else>
      <b-error-result :message="message" @reRequest="getDataSource"></b-error-result>
    </div>
  </div>
</template>
<script>
import {getAction, httpAction, putAction} from "@/api/manage";
import {BoneCommonMixin} from "@/mixins/BoneCommonMixin";
import Vue from 'vue';
import {ORG_CODE, SHOP_TYPE} from "@/store/mutation-types";
import BErrorResult from "@comp/bone/BErrorResult";
import FooterToolBar from "@comp/tools/FooterToolBar";
import JFormContainer from "@comp/jeecg/JFormContainer";
import JDate from "@comp/jeecg/JDate";
import JSelectDepart from "@comp/jeecgbiz/JSelectDepart";
import JImageUpload from "@comp/jeecg/JImageUpload";
import JAreaLinkage from "@comp/jeecg/JAreaLinkage";

export default {
  name: "SmsShopSetting",
  mixins: [BoneCommonMixin],
  components: {
    BErrorResult,
    FooterToolBar,
    JFormContainer,
    JDate,
    JSelectDepart,
    JImageUpload,
    JAreaLinkage,
  },
  data() {
    return {
      description: "自营店铺设置",
      //当前用户店铺类型1:平台，2：自营，3：店铺，4：供应商
      shopType: Vue.ls.get(SHOP_TYPE),
      //当前部门编号
      orgCode: Vue.ls.get(ORG_CODE),
      url: {
        queryById: "/mallBase/smsShop/queryById",
        updateById: "/mallBase/smsShop/edit",
        oneList: "/mallBase/smsServiceCategory/oneList",
        updateBasic: "/mallBase/smsShop/editBasic",
      },
      form: {},
      isSuccess: true,
      message: "你好呀",
      isNotAdmin: true,
      rules: {
        customTel: [
          {required: true, message: '请输入客服电话!'},
        ],
        cashRate: [
          {required: true, message: '请输入提现手续费比例!'},
        ],
        confirmDays: [
          {required: true, message: '请输入自动确认收货天数!'},
        ],
        expressType: [
          {required: true, message: '请选择运费计算规则!'},
        ],
        refundOnWaitingSend: [
          {required: true, message: '请选择待发货是否退运费!'},
        ],
        refundOnWaitingConfirm: [
          {required: true, message: '请选择待收货是否退运费!'},
        ],
        userName: [
          {required: true, message: '请输入登录账号!'},
        ],
        password: [
          {required: true, message: '请输入登录密码!'},
        ],
        categoryIds: [
          {required: true, message: '请选择经营类目!'},
        ],
        name: [
          {required: true, message: '请输入商铺名称!'},
        ],
        logoUrl: [
          {required: true, message: '请输入商铺logo!'},
        ],
        did: [
          {required: true, message: '请选择省市区!'},
        ],
        address: [
          {required: true, message: '请输入店铺地址!'},
        ],
        custodianPortraitImg: [
          // { required: true, message: '请输入管理人像面!' },
        ],
        custodianBadgeImg: [
          // { required: true, message: '请输入管理人国徽面!' },
        ],
        custodianName: [
          {required: true, message: '请输入管理人姓名!'},
        ],
        custodianNumber: [
          // { required: true, message: '请输入管理人身份证!' },
        ],
        custodianNumberDate: [
          // { required: true, message: '请输入管理人身份证有效期!' },
        ],
        custodianPhone: [
          {required: true, message: '请输入管理人联系方式!'},
        ],
        businessLicense: [
          // { required: true, message: '请输入营业执照!' },
        ],
        companyName: [
          // { required: true, message: '请输入公司名称!' },
        ],
        creditCode: [
          // { required: true, message: '请输入统一信用代码!' },
        ],
        legalPersonName: [
          // { required: true, message: '请输入法人名称!' },
        ],
        lpPortraitImg: [
          // { required: true, message: '请输入法人身份证人像面!' },
        ],
        lpBadgeImg: [
          // { required: true, message: '请输入法人身份证国徽面!' },
        ],
        lpIdNumber: [
          // { required: true, message: '请输入法人身份证!' },
        ],
        accountLicence: [
          // { required: true, message: '请输入对公账户许可证!' },
        ],
        comPid: [
          // { required: true, message: '请输入省id!' },
        ],
        comCid: [
          // { required: true, message: '请输入市id!' },
        ],
        comDid: [
          // { required: true, message: '请输入区id!' },
        ],
        comAddress: [
          // { required: true, message: '请输入公司地址!' },
        ]
      },
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      spinning: {
        total: false,
        isNotAdmin: false,
      },
      //经营类目数据
      serviceData: [],
      formBasic: {
        id: "",
        cashRate: "",
        confirmDays: "",
        expressType: "",
        refundOnWaitingSend: "",
        refundOnWaitingConfirm: "",
        customTel: "",
      },
    }
  },
  created() {
    this.getDataSource();
    this.loadServiceCategory();
  },
  methods: {
    loadServiceCategory() {
      getAction(this.url.oneList, {pid: ''}).then(res => {
        if (res.success) {
          this.serviceData = res.result;
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getDataSource: function () {
      let id = this.orgCode;
      if (this.shopType === 1 || this.shopType === 2) {
        id = id + this.orgCode;
        // 用于区分是自营店铺 还是其他店铺
        this.isNotAdmin = false;
      }
      console.log("查询的Id", id);
      getAction(this.url.queryById, {id: id}).then(res => {
        if (res.code === 200) {
          res.result['did'] = res.result['did'] + '';
          if (res.result.categoryIds) {
            res.result.categoryIds = res.result.categoryIds.split(",")
          }
          this.form = res.result;
          this.isSuccess = true;
        } else {
          this.message = res.message;
          this.isSuccess = false;
        }
      });
    },
    submitInfo: function () {
      const that = this
      that.$confirm({
        title: "设置修改",
        content: "是否确认修改配置?",
        okText: '确认',
        cancelText: '取消',
        onOk: function () {
          that.$refs.ruleForm.validate((valid) => {
            if (valid) {
              let formData = Object.assign({}, that.form)
              if (formData['did']) {
                formData['pid'] = formData['did'].substring(0, 2) + "0000"
                formData['cid'] = formData['did'].substring(0, 4) + "00"
              }
              if (formData['comDid']) {
                formData['comPid'] = formData['comDid'].substring(0, 2) + "0000"
                formData['comCid'] = formData['comDid'].substring(0, 4) + "00"
              }
              if (formData.categoryIds && Array.isArray(formData.categoryIds)) {
                formData.categoryIds = formData.categoryIds.join(',')
              }
              console.log("表单提交数据", formData)
              that.spinning.total = true;
              putAction(that.url.updateById, formData).then((res) => {
                if (res.success) {
                  that.showSuccess(res.message);
                } else {
                  that.showWarn(res.message)
                }
              }).finally(() => {
                that.spinning.total = false;
              })
            } else {
              console.log(valid)
            }
          })
        }
      });
      // 触发表单验证
    },
    submitBasic: function () {
      this.formBasic = {
        id: this.form.id,
        cashRate: this.form.cashRate,
        confirmDays: this.form.confirmDays,
        expressType: this.form.expressType,
        refundOnWaitingSend: this.form.refundOnWaitingSend,
        refundOnWaitingConfirm: this.form.refundOnWaitingConfirm,
        customTel: this.form.customTel,
      };
      let that = this;
      this.$confirm({
        title: "修改配置",
        content: "是否将修改基础配置?",
        okText: '确认',
        cancelText: '取消',
        onOk: function () {
          that.$refs.ruleForm.validate((valid) => {
            that.spinning.isNotAdmin = true;
            if (valid) {
              putAction(that.url.updateBasic, that.formBasic).then(res => {
                if (res.success) {
                  that.showSuccess(res.message);
                } else {
                  that.showWarn(res.message);
                }
              }).finally(() => {
                that.spinning.isNotAdmin = false;
              });
            }
          })
        }
      });
    }
  }
}
</script>

<style scoped>
.tip-title-now {
  color: #333333;
  font-weight: 700;
  font-size: 18px;
  line-height: 40px;
  border-bottom: solid 5px #dddddd;
  margin-bottom: 20px;
}
</style>